<template>
  <div>
    <h1>【aty-divider】 component demo</h1>
    <p>【aty-divider】本质是一个div</p>
    <aty-row class="fd-divider-box">
      <aty-row>
        <aty-title level="4">1.【aty-divider】 基础</aty-title>
        <aty-divider/>
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-divider】 设置上边距</aty-title>
        <aty-panel class="fd-test"/>
        <aty-divider margin-top-left="30px"/>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-divider】 设置下边距</aty-title>
        <aty-divider margin-bottom-right="30px"/>
        <aty-panel class="fd-test"/>
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-divider】 设置分割线的高</aty-title>
        <aty-divider :height="5"/>
        <aty-divider height="10px"/>
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-divider】 设置分割线颜色</aty-title>
        <aty-divider color="#3399ff" width="50%"/>
        <aty-divider color="#3399ff"/>
        <aty-divider color="#00cc66"/>
        <aty-divider color="#ff9900"/>
        <aty-divider color="#ff6600"/>
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-divider】 中间加入文字</aty-title>
        <aty-divider>文字默认在中间</aty-divider>
        <aty-divider :orientation="'left'">文字在左边</aty-divider>
        <aty-divider :orientation="'center'">文字在中间</aty-divider>
        <aty-divider :orientation="'right'">文字在右边</aty-divider>
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-divider】 加入图案</aty-title>
        <aty-divider color="#3399ff">
          <aty-icon type="android-desktop" size="32"></aty-icon>
        </aty-divider>
      </aty-row>
      <aty-row>
        <aty-title level="4">6.【aty-divider】 设置虚线</aty-title>
        <aty-divider :dashed="true">
          <aty-icon type="android-desktop" size="32"></aty-icon>
        </aty-divider>
      </aty-row>
      <aty-row>
        <aty-title level="4">7.【aty-divider】 垂直分割线</aty-title>
        <aty-text>text</aty-text>
        <aty-divider type="vertical" :margin-bottom-right="50"/>
        <aty-text>text</aty-text>
        <aty-divider type="vertical"/>
        <aty-text>text</aty-text>
        <aty-divider type="vertical"/>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
  export default {
    //  components: { Alert, Icon }
  }
</script>
<style lang="less" type="text/less">
  .fd-divider-box {
    margin: 20px;
    text-align: left;
  }

  .fd-test {
    border: 1px solid #ddd;
    height: 10px;
  }
</style>
